<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <div class="headerbox" @click="getLocalTime">
      <router-link :to="{ name: 'cinema' }" class="header-left"
        ><p @click="back">&lt;</p></router-link
      >

      <p class="headerright">{{ filmName }}</p>
    </div>
    <aside class="cinemaAddress">
      <div class="address">
        <p class="address-left-top">{{ filmName }}</p>
        <p class="address-left-bottom">{{ cinemasAddress }}</p>
      </div>
      <p class="map">^o^</p>
    </aside>
  </div>
  <!-- 轮播图 -->
  <aside class="bannerLists">
    <div class="bannerbg" :style="`background-image:url(${filmPoster})`">
      <div class="bannerrgba">
        <van-swipe
          class="my-swipe"
          indicator-color="white"
          :loop="true"
          :width="140"
          show-indicators="true"
          @change="change"
        >
          <van-swipe-item class="imgList"></van-swipe-item>

          <!-- eslint-disable-next-line vue/valid-v-for -->
          <van-swipe-item
            @mousedown="filmDetail(film)"
            v-for="film in films"
            :key="films.filmId"
            ><img :src="film.poster" alt="" class="imgList"
          /></van-swipe-item>
          <van-swipe-item class="imgList"></van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </aside>
  <!-- 电影信息 -->
  <aside class="filmDetails">
    <div class="filmDetails-top">
      <span class="filmDetails-top-left">{{ name }}</span>
      <span class="filmDetails-top-right"
        >{{ parseInt(Math.random() * 2 + 8) }}.{{
          parseInt(Math.random() * 2 + 8)
        }}分</span
      >
    </div>
    <div class="filmDetails-bottom">
      <span class="filmDetails-bottom-left">{{ runtime }}分钟</span>
      <span class="filmDetails-bottom-center">{{ category }}</span>
      <span class="filmDetails-bottom-right">{{ Castlist }}</span>
    </div>
  </aside>
  <aside>
    <van-tabs>
      <van-tab title="今天10月14日">
        <div class="applyCard">
          <span class="applyCard-left">折扣</span>
          <span class="applyCard-center">开卡更优惠</span>
          <span class="applyCard-right">9.9元起开卡></span>
        </div>
        <div class="filmstimeList" v-for="msg in msgs" :key="msgs.startTimeH">
          <aside class="filmstimeList-left">
            <div class="filmstimeList-left-left">
              <p class="filmstimeList-left-left-top">
                {{ msg.startTimeH }}:{{ msg.startTimeM }}
              </p>
              <p class="filmstimeList-left-left-bottom">
                {{ msg.endtimeH }}:{{ msg.engtimeM }}散场
              </p>
            </div>
            <div class="filmstimeList-left-center">
              <div class="filmstimeList-left-center-left">
                <p class="filmstimeList-left-center-left-top">
                  {{ msg.language }}
                </p>
                <p class="filmstimeList-left-center-left-bottom">
                  {{ msg.type }}
                </p>
              </div>
              <div class="filmstimeList-left-center-right">
                ￥{{ parseInt(Math.random() * 30 + 10) }}
              </div>
            </div>
          </aside>
          <aside class="filmstimeList-right" @click="move">购票</aside>
        </div>
      </van-tab>
      <!-- 电影场次详情列表 -->
      <van-tab title="明天10月15日">
        <div class="applyCard">
          <span class="applyCard-left">折扣</span>
          <span class="applyCard-center">开卡更优惠</span>
          <span class="applyCard-right">9.9元起开卡></span>
        </div>
        <div class="filmstimeList" v-for="msg in msgs2" :key="msgs.startTimeH">
          <aside class="filmstimeList-left">
            <div class="filmstimeList-left-left">
              <p class="filmstimeList-left-left-top">
                {{ msg.startTimeH }}:{{ msg.startTimeM }}
              </p>
              <p class="filmstimeList-left-left-bottom">
                {{ msg.endtimeH }}:{{ msg.engtimeM }}散场
              </p>
            </div>
            <div class="filmstimeList-left-center">
              <div class="filmstimeList-left-center-left">
                <p class="filmstimeList-left-center-left-top">
                  {{ msg.language }}
                </p>
                <p class="filmstimeList-left-center-left-bottom">
                  {{ msg.type }}
                </p>
              </div>
              <div class="filmstimeList-left-center-right">
                ￥{{ parseInt(Math.random() * 30 + 10) }}
              </div>
            </div>
          </aside>
          <aside class="filmstimeList-right" @click="move">购票</aside>
        </div>
      </van-tab>
      <van-tab title=""></van-tab>
    </van-tabs>
  </aside>
  <!-- 影院超值套餐 -->
  <aside>
    <p class="popcornboxtop"></p>
    <p class="popcornbox">影院超值套餐</p>
    <div v-for="popcorn in popcorns" :key="popcorns.popcornId" class="popcorn">
      <div class="popcorn-left">
        <img :src="popcorn.ImgUrl" alt="" class="popcorn-left-img" />
      </div>
      <div class="popcorn-right">
        <div class="popcorn-right-top">
          <p class="popcorn-right-top-left">{{ popcorn.peoples }}</p>
          <p class="popcorn-right-top-right">{{ popcorn.size }}</p>
        </div>
        <div class="popcorn-right-bottom">
          <p class="popcorn-right-bottom-left">
            ￥{{ parseInt(Math.random() * 30 + 20) }}
          </p>
          <div class="popcorn-right-bottom-right">
            <p class="popcorn-right-bottom-right-top">
              已售{{ parseInt(Math.random() * 100 + 208) }}
            </p>
            <p class="popcorn-right-bottom-right-bottom">去购买</p>
          </div>
        </div>
      </div>
    </div>
  </aside>
  <p class="bottom">~~到底咯QAQ~~</p>
</template>

<script>
import { defineComponent } from 'vue'

import axios from 'axios'

export default defineComponent({
  watch: {
    lisNum() {}
  },
  data() {
    return {
      popcorns: [
        {
          popcornId: 0,
          peoples: '双人',
          size: '64oz爆米花1桶+500ml美年达2瓶',
          ImgUrl:
            'https://p0.meituan.net/180.132/movie/adf8b9f4025415b3c9c74e2199638b91122670.png@388w_388h_2e'
        },
        {
          popcornId: 1,
          peoples: '单人',
          size: '46oz爆米花1桶+500ml美年达1瓶',

          ImgUrl:
            '	https://p0.meituan.net/180.132/movie/821c29e5d0dc26cf19f2f88e0e311c7c101544.png@388w_388h_2e'
        },
        {
          popcornId: 2,
          peoples: '双人',
          size: '64oz爆米花1桶+500ml美年达2瓶',
          ImgUrl:
            'https://p0.meituan.net/180.132/movie/adf8b9f4025415b3c9c74e2199638b91122670.png@388w_388h_2e'
        },
        {
          popcornId: 3,
          peoples: '单人',
          size: '46oz爆米花1桶+500ml美年达1瓶',
          ImgUrl:
            '	https://p0.meituan.net/180.132/movie/821c29e5d0dc26cf19f2f88e0e311c7c101544.png@388w_388h_2e'
        },
        {
          popcornId: 4,
          peoples: '双人',
          size: '抓娃娃充值10元必得草莓熊OUO',
          ImgUrl:
            '	'
        },
        {
          popcornId: 5,
          peoples: '双人',
          size: '刺激刮刮乐财运降临一发入魂^o^',
          ImgUrl:
            '	https://img0.baidu.com/it/u=331752804,1302477421&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665680400&t=c944147857de11aac364b72f451d2e33'
        }
      ],
      msgs: [
        {
          startTimeH: 12,
          startTimeM: 20,
          endtimeH: 13,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 15,
          startTimeM: 20,
          endtimeH: 16,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 16,
          startTimeM: 20,
          endtimeH: 17,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 17,
          startTimeM: 20,
          endtimeH: 18,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 18,
          startTimeM: 20,
          endtimeH: 19,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 19,
          startTimeM: 20,
          endtimeH: 20,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 20,
          startTimeM: 20,
          endtimeH: 21,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 21,
          startTimeM: 20,
          endtimeH: 22,
          engtimeM: 48,
          language: '国语 2D',
          type: '7号杜比巨幕厅（无票儿童不提供3D眼睛）'
        }
      ],
      msgs2: [
        {
          startTimeH: 12,
          startTimeM: 24,
          endtimeH: 13,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 15,
          startTimeM: 25,
          endtimeH: 16,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 16,
          startTimeM: 26,
          endtimeH: 17,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 17,
          startTimeM: 27,
          endtimeH: 18,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 18,
          startTimeM: 45,
          endtimeH: 19,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 19,
          startTimeM: 264,
          endtimeH: 20,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 20,
          startTimeM: 54,
          endtimeH: 21,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        },
        {
          startTimeH: 21,
          startTimeM: 32,
          endtimeH: 22,
          engtimeM: 48,
          language: '英语 3D',
          type: '3号IMAX厅（无票儿童不提供3D眼睛）'
        }
      ],
      day: 11,
      lisNum: 0,
      time: '',
      num: [1, 2, 3],
      films: [],
      filmId: 0,
      cinemas: [],
      cinemaUrl: `${window.location.href.slice(
        window.location.href.indexOf(0, 22) + 1
      )}`,
      filmName: '',
      cinemasAddress: '',
      imgUrl: '',
      name: '万里归途',
      runtime: '137',
      category: '剧情|战争',
      Castlist: '张译 王俊凯 殷桃',
      newDate: '',
      filmPoster:
        'https://static.maizuo.com/pc/v5/usr/movie/f31367bb1a275f032ea3793a0571d9e0.jpg'
    }
  },
  methods: {
    back() {},
    change(index) {
      this.filmDetail(this.films[index])
    },
    toDetail(filmId) {
      // this.$router.push({ name: 'detail', params: { id: filmId } })
      this.$router.push('/detail/' + filmId)
    },
    showName() {
      for (let i = 0; i < 81; i++) {
        if (this.cinemas[i].cinemaId == this.cinemaUrl) {
          this.filmName = this.cinemas[i].name
          this.cinemasAddress = this.cinemas[i].address
        }
      }
    },
    filmDetail(film) {
      let { name, runtime, category, poster, filmId } = film
      this.name = name
      this.runtime = runtime
      this.category = category
      this.filmPoster = poster
      this.filmId = filmId
      switch (filmId) {
        case 6112:
          this.lisNum = 1
          break
        case 6082:
          this.lisNum = 2
          break
        case 6050:
          this.lisNum = 3
          break
        case 6026:
          this.lisNum = 4
          break
        case 6105:
          this.lisNum = 5
          break
        case 6111:
          this.lisNum = 6
          break
        case 6110:
          this.lisNum = 7
          break
        case 6015:
          this.lisNum = 8
          break
        case 5439:
          this.lisNum = 9
          break
        case 5591:
          this.lisNum = 10
          break
        default:
          this.lisNum = 0
          break
      }
    },
    move() {
      // this.$store.commit('cinemaData/changeFilmsId', this.name)

      for (let i = 0; i < this.films.length; i++) {
        if (this.films[i].name == this.name) {
          this.filmId = this.films[i].filmId
          // this.cinemasAddress = this.cinemas[i].address
        }
      }
      // this.$router.push(`/cinemafind/${0}${this.filmId}?${this.cinemaUrl}`)
      this.$router.push({
        name: 'cinemafind',
        params: {
          id: this.filmId
        },
        query: {
          cinemaUrl: this.cinemaUrl,
          name: this.name,
          imgUrl: this.filmPoster
        }
      })
      console.log(this.films[0].name)
      console.log(this.filmId)
    }
  },
  async created() {
    // eslint-disable-next-line no-unused-vars
    let film = await axios({
      url: `https://m.maizuo.com/gateway/?cinemaId=${this.cinemaUrl}`,
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.2.1","e":"16652866903627082701602817","bc":"370200"}',
        'X-Host': 'mall.film-ticket.film.cinema-show-film'
      }
    })
    this.films = film.data.data.films
  },
  async mounted() {
    let res = await axios({
      url: 'https://m.maizuo.com/gateway?cityId=370200&ticketFlag=1&k=8791981',
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.2.1","e":"16652866903627082701602817","bc":"370200"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    })
    this.cinemas = res.data.data.cinemas
    this.showName()
  }
})
</script>

<style lang="scss" scoped>
.headerbox {
  background: rgb(214, 67, 67);
  color: #fff;
  font-size: 0.2rem;
  line-height: 0.6rem;
  height: 0.6rem;
  display: flex;
  .header-left {
    font-size: 0.3rem;
    margin-left: 0.1rem;
    width: 0.5rem;
  }
  .headerright {
    font-size: 0.2rem;
    margin-left: 0.1rem;
    color: #fff !important;
  }
}
a {
  color: #fff;
}
.cinemaAddress {
  height: 0.8rem;
  display: flex;
  .address {
    width: 80%;
    height: 0.6rem;
    margin-left: 0.1rem;
    margin-top: 0.15rem;
    border-right: 1px solid #999;
    .address-left-top {
      font-size: 0.2rem;
      font-weight: 600;
    }
    .address-left-bottom {
      width: 100%;
      font-size: 0.08rem;
      color: #999;
      margin-top: 0.1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .map {
    font-weight: 600;
    width: 15%;
    height: 100%;
    line-height: 0.8rem;
    text-align: center;
  }
}
//轮播图
.bannerLists {
  display: block;
  width: 100%;
  height: 1.5rem !important;
  overflow: hidden;
  .bannerbg {
    background-size: 100%, 100%;
    .bannerrgba {
      background-color: rgba($color: #000000, $alpha: 0.6);
    }
  }
  .my-swipe .van-swipe-item {
    text-align: center;
    line-height: 1.5rem;
    height: 100%;

    .imgList {
      width: 1.1rem;
      height: 1.5rem;
    }
  }
}
//电影详情
.filmDetails {
  height: 0.7rem;
  width: 95%;
  margin-left: 2.5%;
  font-size: 0.05rem;
  border-bottom: 1px solid #ccc;
  .filmDetails-top {
    height: 50%;
    width: 100%;
    display: inline-block;
    font-size: 0.2rem;
    line-height: 0.4rem;
    text-align: center;
    font-weight: 600;
    .filmDetails-top-right {
      margin-left: 0.1rem;
      color: rgb(237, 189, 48);
    }
  }
  .filmDetails-bottom {
    height: 50%;
    width: 100%;
    color: #999;
    line-height: 0.3rem;
    text-align: center;
    .filmDetails-bottom-center {
      border-left: 1px solid #999;
      border-right: 1px solid #999;
      margin: 0 0.075rem;
      padding: 0 0.075rem;
    }
  }
}

//开卡提示
.applyCard {
  height: 0.45rem;
  background: rgb(253, 246, 230);
  font-size: 0.17rem;
  .applyCard-left {
    float: left;
    height: 0.2rem;
    width: 0.4rem;
    background: orange;
    color: #fff;
    margin-top: 0.15rem;
    font-size: 0.13rem;
    text-align: center;
    margin-left: 0.15rem;
    border-radius: 0.03rem;
  }
  .applyCard-center {
    float: left;
    height: 0.2rem;
    width: 1rem;
    color: orange;
    text-align: center;
    font-size: 0.13rem;
    margin-top: 0.15rem;
  }
  .applyCard-right {
    float: right;
    height: 0.2rem;
    width: 0.8rem;
    font-size: 0.13rem;
    color: #999;
    margin-top: 0.15rem;
  }
}
//电影场次详情
.filmstimeList {
  height: 1rem;
  border-top: 1px solid rgb(175, 173, 173);
  display: flex;
  justify-content: space-between;
  .filmstimeList-left {
    display: flex;
    .filmstimeList-left-left {
      width: 1rem;
      margin: 0.2rem;
      .filmstimeList-left-left-top {
        font-size: 0.27rem;
      }
      .filmstimeList-left-left-bottom {
        font-size: 0.08rem;
        color: rgb(175, 173, 173);
        margin: 0.05rem 0.05rem;
      }
    }
    .filmstimeList-left-center {
      width: 1.9rem;
      height: 1rem;
      margin-top: 0.2rem;
      display: flex;
      color: rgb(175, 173, 173);
      .filmstimeList-left-center-left {
        font-size: 0.12rem;
        .filmstimeList-left-center-left-top {
          font-size: 0.17rem;
          margin: 0.1rem;
          color: #000;
        }
        .filmstimeList-left-center-left-bottom {
          font-size: 0.14rem;
          margin-left: 0.1rem;
        }
      }
      .filmstimeList-left-center-right {
        color: red;
        font-size: 0.2rem;
      }
    }
  }
  .filmstimeList-right {
    display: flex;
    width: 0.4rem;
    height: 0.2rem;
    justify-content: center;
    align-items: center;
    margin-right: 0.3rem;
    border: 1px solid red;
    border-radius: 0.2rem;
    font-size: 0.12rem;
    margin-top: 0.4rem;
    color: red;
  }
}

//影院套餐
.popcornboxtop {
  height: 0.17rem;
  background: rgb(245, 243, 243);
}
.popcornbox {
  height: 0.5rem;
  line-height: 0.5rem;
  margin-left: 0.1rem;
}
.popcorn {
  height: 1.3rem;
  border-top: 1px solid rgb(193, 191, 191);
  display: flex;
  .popcorn-left {
    width: 1rem;
    height: 1rem;
    margin: 0.1rem;
    .popcorn-left-img {
      width: 100%;
      height: 100%;
    }
  }
  .popcorn-right {
    .popcorn-right-top {
      display: flex;
      font-size: 0.15rem;
      margin: 0.1rem;
      .popcorn-right-top-left {
        color: #fff;
        width: 0.37rem;
        height: 0.2rem;
        background: orange;
        text-align: center;
        border-radius: 8%;
        line-height: 0.2rem;
        margin-right: 0.1rem;
      }
    }
    .popcorn-right-bottom {
      height: 0.6rem;
      display: flex;
      justify-content: space-between;
      .popcorn-right-bottom-left {
        color: red;
        margin-left: 0.1rem;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.2rem;
      }
      .popcorn-right-bottom-right {
        font-size: 0.1rem;
        color: #ccc;
        margin-top: 0.1rem;
        .popcorn-right-bottom-right-bottom {
          width: 0.5rem;
          height: 0.25rem;
          background: rgb(240, 83, 83);
          color: #fff;
          margin-top: 0.1rem;
          text-align: center;
          line-height: 0.25rem;
        }
      }
    }
  }
}
.bottom {
  height: 0.4rem;
  font-size: 0.15rem;
  color: #999;
  text-align: center;
  margin-bottom: 0.1rem;
  line-height: 0.3rem;
}
</style>
